
<template>
  <div class="user-cell">
    <em-cell
      v-if="user"
      :title="userName"
      :size="size"
      :type="type"
      center
      @click="onCellClick"
    >
      <template #label>
        UID:{{ user.id }}
      </template>
      <template #icon>
        <el-avatar
          :size="size"
          icon="el-icon-user-solid"
          :src="user.avatar"
        />
      </template>
    </em-cell>
    <user-pannel
      v-if="user && user.id"
      v-model="dialogVisible"
      :user="user"
      :primary-key="user.id"
    />
  </div>
</template>

<script>
import UserPannel from './components/UserPannel'
export default {
  name: 'UserCell',
  components: {
    UserPannel
  },
  props: {
    value: {
      type: Object,
      default: null
    },
    clickable: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'small'
    },
    type: {
      type: String,
      default: 'user'
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  computed: {
    user() {
      if (this.value) {
        return { ...this.value }
      }
      return {
        id: '',
        username: 'No',
        avatar: '',
        extends: ''
      }
    },
    userName() {
      return (this.user && (this.user.username || this.user.nickname)) || '匿名用户'
    }
  },
  methods: {
    onCellClick() {
      if (this.clickable) {
        this.dialogVisible = true
      } else {
        this.dialogVisible = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.user-cell {
  display: inline-block;
}
.em-cell--user {
  padding: 0;
  .em-cell__label {
    margin: 0;
    line-height: 1;
    transform: scale(0.8);
    transform-origin: left center;
  }
}
</style>

